@import "~terriajs-variables";
@import "../../../Sass/common/mixins";

@include empty-module("inner");
@include empty-module("chart-panel");

.holder {
  left: 0;
  right: 0;
  z-index: 10;
  background: $chart-panel-background;
  padding-bottom: 13px;
}

.header {
  height: 41px;
  box-sizing: border-box;
  position: relative;
  background-color: $chart-panel-header;
  font-size: $font-size-mid-small;
  fill: #fff;
}

.chart {
  color: $text-light;

  :global {
    .base-chart .axis path.domain {
      stroke: $chart-axis-color;
    }

    .base-chart .axis .tick line {
      stroke: $chart-grid-color;
    }

    .base-chart .axis .colors line {
      stroke-width: 2;
    }

    .base-chart .plot-area {
      fill: $chart-area-color;
    }

    .units-label-shadow {
      stroke: $chart-darker;
      stroke-width: 2.5px;
      opacity: 0.9;
    }

    .base-chart text {
      fill: $chart-text-color;
      font-family: monospace;
      font-size: 110%;
    }

    .base-chart .line {
      fill: none;
      stroke: $chart-line-color;
      stroke-width: 1;
    }
  }
}

.chart-panel .axis .colors path {
  stroke-width: 2;
}

.section-label,
.btn {
  color: $text-light;
  display: inline-block;
  vertical-align: top;
}

.section-label {
  composes: label from "../../../Sass/common/_labels.scss";
}

.loader {
  padding: 0px 0px 0px $padding * 3 !important;
  &:before {
    top: 0px;
  }
}

.btn--close-chart-panel {
  composes: btn from "../../../Sass/common/_buttons.scss";
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px;
  svg {
    height: 15px;
    width: 15px;
    fill: #fff;
  }
  &:hover,
  &:focus {
    svg {
      fill: $color-primary;
    }
  }
}
